<template>
  <div style="width: 100%; border-radius: 8px 8px 8px 8px; background: #ffffff; padding: 12px; margin: 12px 0">
    <div
      style="
        width: 100%;
        height: 32px;
        background: #f5f9ff;
        border-radius: 4px 4px 4px 4px;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #3d8dff;
      ">
      痕迹
    </div>
    <div>
      <div style="margin: 8px 0; font-weight: 400; font-size: 12px; color: #666666">1.曾经的消费品项和金额</div>
      <van-field v-model="clkFanganObj.bb1"></van-field>
      <div style="border-top: 1px solid #dcdfe6; width: 100%"></div>
    </div>
    <div>
      <div style="margin: 8px 0; font-weight: 400; font-size: 12px; color: #666666">2.曾经的消费习惯</div>
      <van-field v-model="clkFanganObj.bb2"></van-field>
      <div style="border-top: 1px solid #dcdfe6; width: 100%"></div>
    </div>
    <div>
      <div style="margin: 8px 0; font-weight: 400; font-size: 12px; color: #666666">3.当前正在消费和未消费明细</div>
      <van-field v-model="clkFanganObj.bb3"></van-field>
      <div style="border-top: 1px solid #dcdfe6; width: 100%"></div>
    </div>
    <div>
      <div style="margin: 8px 0; font-weight: 400; font-size: 12px; color: #666666">4.性格主观评价</div>
      <van-field v-model="clkFanganObj.bb4"></van-field>
      <div style="border-top: 1px solid #dcdfe6; width: 100%"></div>
    </div>
    <div>
      <div style="margin: 8px 0; font-weight: 400; font-size: 12px; color: #666666">5.工作和事业状态</div>
      <van-field v-model="clkFanganObj.bb5"></van-field>
      <div style="border-top: 1px solid #dcdfe6; width: 100%"></div>
    </div>
    <div>
      <div style="margin: 8px 0; font-weight: 400; font-size: 12px; color: #666666">6.财富信息（车，房）</div>
      <van-field v-model="clkFanganObj.bb6"></van-field>
      <div style="border-top: 1px solid #dcdfe6; width: 100%"></div>
    </div>
    <div>
      <div style="margin: 8px 0; font-weight: 400; font-size: 12px; color: #666666">7.感情状态</div>
      <van-field v-model="clkFanganObj.bb7"></van-field>
      <div style="border-top: 1px solid #dcdfe6; width: 100%"></div>
    </div>
    <div>
      <div style="margin: 8px 0; font-weight: 400; font-size: 12px; color: #666666">8.爱好（捕捉到的信息碎片）</div>
      <van-field v-model="clkFanganObj.bb8"></van-field>
      <div style="border-top: 1px solid #dcdfe6; width: 100%"></div>
    </div>
    <div>
      <div style="margin: 8px 0; font-weight: 400; font-size: 12px; color: #666666">9.沟通中品项和需求方面的反馈</div>
      <van-field v-model="clkFanganObj.bb9"></van-field>
      <div style="border-top: 1px solid #dcdfe6; width: 100%"></div>
    </div>
    <div>
      <div style="margin: 8px 0; font-weight: 400; font-size: 12px; color: #666666">
        10.沟通中非医美内容的反馈（生活工作等）
      </div>
      <van-field v-model="clkFanganObj.bb10"></van-field>
      <div style="border-top: 1px solid #dcdfe6; width: 100%"></div>
    </div>
    <div>
      <div style="margin: 8px 0; font-weight: 400; font-size: 12px; color: #666666">11.团队对这位顾客的判断</div>
      <van-field v-model="clkFanganObj.bb11"></van-field>
      <div style="border-top: 1px solid #dcdfe6; width: 100%"></div>
    </div>
    <div>
      <div style="margin: 8px 0; font-weight: 400; font-size: 12px; color: #666666">12.希望成交金额和原因</div>
      <van-field v-model="clkFanganObj.bb12"></van-field>
      <div style="border-top: 1px solid #dcdfe6; width: 100%"></div>
    </div>
    <div>
      <div style="margin: 8px 0; font-weight: 400; font-size: 12px; color: #666666">13.咨询认为怎么攻克比较好</div>
      <van-field v-model="clkFanganObj.bb13"></van-field>
      <div style="border-top: 1px solid #dcdfe6; width: 100%"></div>
    </div>
    <div style="text-align: center; margin-top: 20px">
      <van-button type="info" style="width: 200px" @click.stop="subBaobiaodan">提交</van-button>
      <van-button type="default" style="width: 200px" @click.stop="handleClosePage">取消</van-button>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { getFanganByCid, saveFangan } from '@/api/ym';
// 引入第三方组件
import { Notify, Button as VanButton, Field as VanField } from 'vant';
import 'vant/lib/button/style';
import 'vant/lib/field/style';
import { mapGetters } from 'vuex';

const ClkFanganDefault = {
  cid: undefined,
  bb1: '',
  bb2: '',
  bb3: '',
  bb4: '',
  bb5: '',
  bb6: '',
  bb7: '',
  bb8: '',
  bb9: '',
  bb10: '',
  bb11: '',
  bb12: '',
  bb13: '',
};

export default {
  name: 'ClerkHenji',
  components: {
    VanField,
    VanButton,
  },
  data() {
    return {
      clkFanganObj: ClkFanganDefault,
    };
  },
  computed: {
    ...mapGetters(['openId', 'name', 'id']),
  },
  methods: {
    handleClosePage() {
      this.$emit('closed', 'closed');
    },
    getConsumerFangan: async function (id) {
      this.clkFanganObj = Object.assign({}, ClkFanganDefault);
      this.clkFanganObj.cid = id;
      const errAlertMsg = '获取痕迹失败';
      getFanganByCid(id)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.clkFanganObj.id = ret.id;
            this.clkFanganObj.cid = ret.cid;
            this.clkFanganObj.bb1 = ret.bb1;
            this.clkFanganObj.bb2 = ret.bb2;
            this.clkFanganObj.bb3 = ret.bb3;
            this.clkFanganObj.bb4 = ret.bb4;
            this.clkFanganObj.bb5 = ret.bb5;
            this.clkFanganObj.bb6 = ret.bb6;
            this.clkFanganObj.bb7 = ret.bb7;
            this.clkFanganObj.bb8 = ret.bb8;
            this.clkFanganObj.bb9 = ret.bb9;
            this.clkFanganObj.bb10 = ret.bb10;
            this.clkFanganObj.bb11 = ret.bb11;
            this.clkFanganObj.bb12 = ret.bb12;
            this.clkFanganObj.bb13 = ret.bb13;
          }
        })
        .catch(err => {
          console.error(err);
          Notify({ type: 'danger', message: errAlertMsg });
        });
    },
    subBaobiaodan() {
      const errAlertMsg = '保存痕迹失败';
      saveFangan(this.clkFanganObj).then(res => {
        if (res.data.status !== apiSts.ResponseOK) {
          if (res.data.message) {
            Notify({ type: 'danger', message: res.data.message });
          } else {
            Notify({ type: 'danger', message: errAlertMsg });
          }
          return;
        }
        Notify({ type: 'success', message: '提交成功' });
        this.handleClosePage();
      });
    },
  },
};
</script>
